<template>
  <view class="jisuan-detail">
    <view class="header-wrapper">
      <my-header navText="任务详情"></my-header>
    </view>
    <view class="content">
      <up-card class="detail-top" :border="false" :foot-border-top="false" head-style="display: flex;border-color: #F2F2F2 !important;">
        <template #head>
            <view class="detail-header" slot="head">
                <text class="item-view">{{ detailInfo.task_name ? detailInfo.task_name : '--' }}</text>
                <view style="align-self: flex-start;">
                  <up-tag 
                    size="mini" 
                    :text="detailInfo.status === 0 ? '校验中' : detailInfo.status === 2 ? '排队中' : detailInfo.status === 5 ? '已完成' : '计算失败'"
                    :bgColor="detailInfo.status === 0 ? 'rgba(255, 183, 0, 0.1)' : detailInfo.status === 2 ? 'rgba(26, 127, 254, 0.1)' : detailInfo.status === 5 ? 'rgba(78, 189, 109, 0.1)' : 'rgba(255, 89, 89, 0.1)'"
                    :color="detailInfo.status === 0 ? '#D29E1A' : detailInfo.status === 2 ? '#1A7FFE' : detailInfo.status === 5 ? '#4EBD6D' : '#FF5959'">
                  </up-tag>
                </view>
            </view>
        </template>
        <template #body>
          <view class="detail-body" slot="body">
              <view class="body-item">
                <view style="width: 75px; color: rgba(0, 0, 0, 0.4)">创建时间</view>
                <view class="item-view">{{ detailInfo.create_datetime ? detailInfo.create_datetime : '--' }}</view>
              </view>
              <view class="body-item">
                <view style="width: 75px; color: rgba(0, 0, 0, 0.4)">任务来源</view>
                <view class="item-view">{{ detailInfo.task_source ? detailInfo.task_source : '--' }}</view>
              </view>
              <view class="body-item">
                <view style="width: 75px; color: rgba(0, 0, 0, 0.4)">任务ID</view>
                <view class="item-view">{{ detailInfo.task_id ? detailInfo.task_id : '--' }}</view>
              </view>
              <view class="body-item">
                <view style="width: 75px; color: rgba(0, 0, 0, 0.4)">文件名称</view>
                <view class="item-view">{{ detailInfo.csv_name ? detailInfo.csv_name : '--' }}</view>
              </view>
              <view class="body-item">
                <view style="width: 75px; color: rgba(0, 0, 0, 0.4)">量子计算机</view>
                <view class="item-view">{{ detailInfo.machine_name ? detailInfo.machine_name : '--' }}</view>
              </view>
              <view class="body-item">
                <view style="width: 75px; color: rgba(0, 0, 0, 0.4)">项目名称</view>
                <view class="item-view">{{ detailInfo.project && detailInfo.project.name ? detailInfo.project.name : '--' }}</view>
              </view>
              <view class="body-item">
                <view style="width: 75px; color: rgba(0, 0, 0, 0.4)">项目ID</view>
                <view class="item-view">{{ detailInfo.project && detailInfo.project.project_id ? detailInfo.project.project_id : '--' }}</view>
              </view>
          </view>
        </template>
      </up-card>
      <up-card class="detail-bottom" :border="false" :foot-border-top="false" head-style="display: flex;border-color: #F2F2F2 !important;">
        <template #head>
            <view class="detail-bottom-header" slot="head">
              <view class="body-item">
                <view style="width: 75px; color: rgba(0, 0, 0, 0.4)">状态描述</view>
                <view class="item-view">{{ detailInfo.status_desc ? detailInfo.status_desc : '--'}}</view>
              </view>
              <view class="body-item">
                <view style="width: 75px; color: rgba(0, 0, 0, 0.4)">结束时间</view>
                <view class="item-view">{{ detailInfo.complete_datetime ? detailInfo.complete_datetime : '--'}}</view>
              </view>
              <view class="body-item">
                <view style="width: 75px; color: rgba(0, 0, 0, 0.4)">运行时长</view>
                <view class="item-view">{{ detailInfo.time_consume ? detailInfo.time_consume : '--' }}</view>
              </view>
            </view>
        </template>
        <template #body>
          <view class="detail-bottom-body" slot="body">
              <view class="body-item">
                <text style="font-weight: 500;">QUBO Value</text>
                <view class="img-view">
                  <img class="img" :style="{'width': !detailInfo.matrix_url ? '100px' : '', 'height': !detailInfo.matrix_url ? '95px' : ''}" :src="detailInfo.matrix_url ? detailInfo.matrix_url : 'https://images-cloud.qboson.com/miniProgram/no_data_img.png'">
                  <text v-if="!detailInfo.matrix_url" class="no-data-text">
                    暂无数据
                  </text>
                </view>
              </view>
              <view class="body-item" style="padding-top: 16px;">
                <text style="font-weight: 500;">输出解向量</text>
                <view v-if="detailInfo.out_data && detailInfo.out_data.length > 0">
                  <view class="result" v-for="(item, index) in detailInfo.out_data" :key="index">
                    <view class="result-top">
                      <view class="result-top-header">结果{{index + 1}}  |  QUBO 值：{{ item.quboValue}}</view>
                      <view class="result-top-bottom">{{ item.solutionVector }}</view>
                    </view>
                  </view>
                </view>
                <view v-else class="no-data">
                  <img style="width: 100px; height: 95px;" src="https://images-cloud.qboson.com/miniProgram/no_data_img.png" alt="" />
                  <text class="no-data-text">
                    暂无数据
                  </text>
                </view>
              </view>
          </view>
        </template>
      </up-card>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTaskDetailAPI } from '@/api/jisuan'

const detailInfo = ref<any>({})

// 获取任务详情
const getTaskDetail = async (val: string) => {
  let params = {
    task_id: val
  }
  const res:any = await getTaskDetailAPI(params)
  console.log('res222===>', res);
  detailInfo.value = res
  detailInfo.value.task_source = res.task_source === 1 ? '云平台' : res.task_source === 3 ? 'N皇后' : res.task_source === 4 ? '小程序N皇后' : '最大割'
  detailInfo.value.out_data = res.out_data ? JSON.parse(res.out_data) : []
}

onLoad((option) => {
  getTaskDetail(option?.task_id)
  console.log('option', option)
  
})
</script>

<style scoped lang="scss">
.jisuan-detail {
  height: 100vh;
  overflow: auto;
  position: relative;
  @mixin back {
    background: radial-gradient(67% 16% at 85% -1%, #C4F9FF 0%, rgba(205, 250, 255, 0) 100%), radial-gradient(145% 79% at 17% 0%, rgba(183, 215, 255, 0.6) 0%, rgba(204, 227, 255, 0.4235) 40%, rgba(255, 255, 255, 0) 100%), #F8F8F8;
    background-size: 100vw 100vh;
  }
  @include back;
  
  .header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    @include back;
  }
  
  .content {
    padding-top: 88px;
  }
  
  ::v-deep .u-card {
    .u-card__head {
      // padding: 10px 12px 14px 12px !important;
      padding-top: 16px !important;
      padding-bottom: 14px !important;
    }
    .u-tag--mini {
      height: 18px !important;
      line-height: 18px !important;
    }
  }
  .detail-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item-view {
      word-wrap: break-word;
      line-height: 160%; 
      max-width: 72%; 
      padding-right: 10px;
      font-size: 15px;
      font-weight: 500;
    }
    ::v-deep .u-tag--primary {
      border: none;
      padding: 3px 10px;
    }
  }
  .detail-body {
    .body-item {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      margin-top: 7px;
      font-size: 12px;
      .item-view {
        width: calc(100% - 80px); 
        margin-left: 8px;
        color: rgba(0, 0, 0, 0.6); 
        word-wrap: break-word;
        line-height: 150%;
      }
    }
    .body-item:first-child {
      margin-top: 0;
    }
  }
  .detail-bottom-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    .body-item {
      display: flex;
      margin-bottom: 8px;
      font-size: 12px;
      .item-view {
        width: calc(100% - 80px); 
        margin-left: 8px;
        color: rgba(0, 0, 0, 0.6); 
        word-wrap: break-word;
      }
    }
    .body-item:first-child {
      margin-top: 6px;
    }
    .body-item:last-child {
      margin-bottom: 0px;
    }
  }
  .detail-bottom-body {
    .body-item {
      font-size: 12px;
      .img-view {
        width: 100%;
        height: 180px;
        background: #FBFBFB;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px 0px;
        margin-top: 8px;
        .no-data-text {
          font-size: 11px;
          font-weight: normal;
          line-height: 12.45px;
          text-align: center;
          display: flex;
          align-items: center;
          color: rgba(0, 0, 0, 0.4);
        }
        .img {
          max-width: 90%;
        }
      }
    }
    .result {
      margin-top: 12px;
      .result-top {
        border: 1px solid #DEDEDE;
        .result-top-header {
          background: #FBFBFB;
          padding: 8px 12px;
          border-bottom: 1px solid #DEDEDE;
        }
        .result-top-bottom {
          padding: 12px;
          white-space: nowrap;
          overflow-x: scroll;
          overflow-y: hidden;
          background: #f6f6f6;
        }
      }
    }
    .no-data {
      width: 100%; 
      height: 216px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #FBFBFB;
      margin-top: 8px;
      .no-data-text {
        font-size: 11px;
        font-weight: normal;
        line-height: 12.45px;
        text-align: center;
        display: flex;
        align-items: center;
        color: rgba(0, 0, 0, 0.4);
      }
    }
  }
}
</style>
